<!--  -->
<template>
  <div>
    <el-row>
      <el-col :span="24" class="page_box_top">
        <div class="but">
          <i class="el-icon-s-fold"></i>
          <el-breadcrumb separator="/" class="page_box_top_nav">
            <el-breadcrumb-item class="breadcrumb_active_item"
              >签到管理</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ name: 'signlist' }"
              >签到活动列表详情</el-breadcrumb-item
            >
            <el-breadcrumb-item>查看详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-button type="danger" size="mini" @click="backBtn()">返回</el-button>
      </el-col>
    </el-row>
    <el-form :model="dialogForm" :disabled="disabled">
      <el-form-item label="图片:" prop="image_path" label-width="100px">
        <el-image fit="cover" :src="dialogForm.image_path" class="avatar" />
      </el-form-item>
      <el-form-item label="标题:" prop="title" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.title" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="比赛开始日期:"
        prop="title"
        :label-width="formLabelWidth"
      >
        <el-input v-model="dialogForm.start_date" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="比赛地址:"
        prop="title"
        :label-width="formLabelWidth"
      >
        <el-input v-model="dialogForm.address" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="创建时间:"
        prop="title"
        :label-width="formLabelWidth"
      >
        <el-input v-model="dialogForm.created_at" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-button type="primary" class="adds" @click="add">新增</el-button>
    <el-table
      :data="section"
      border
      style="width: 100%; margin-top: 20px"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="start_time" min-width="100" label="开始时间">
      </el-table-column>
      <el-table-column prop="end_time" min-width="100" label="结束时间">
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" min-width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="100"
        fixed="right"
        v-if="section.length != 0"
      >
        <template #default="scope">
          <el-button type="warning" size="small" @click="modify(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="deleter(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="60%"
      :center="true"
      :visible.sync="dialogFormVisible"
      :title="dialogTitle"
      :closed="cancelBtn"
    >
      <div class="block">
        新增
        <span class="demonstration">创建时间：</span>
        <!-- <el-date-picker
         
          v-model="value2"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="defulttime"
          value-format="yyyy-MM-DD hh:mm:ss"
        /> -->
        <el-date-picker
          v-if="dialogForm.id == null"
          v-model="value2"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="defulttime"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>

        <el-date-picker
          v-if="dialogForm.id != null"
          v-model="value2"
          type="datetimerange"
          :start-placeholder="dialogForm.start_date"
          :end-placeholder="dialogForm.address"
          @change="defulttime"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelBtn()">取消</el-button>
          <!-- 新增 -->
          <el-button type="primary" @click="confirmBtn()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <div class="exam_from_btn_box"></div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dialogForm: {
        id: null,
        title: "",
        image_path: "",
        address: "",
        start_date: "",
        created_at: "",
      },
      formLabelWidth: "100px",
      section: [],
      disabled: true, //弹窗表单是否禁用
      dialogFormVisible: false, //弹窗隐藏控制
      dialogTitle: "新增签到时间",
      value2: "",
      timelist: [],
      id: "",
    };
  },
  mounted() {
    this.singform();
  },
  methods: {
    // 详情列表
    singform() {
      //   console.log(this.$route.query.id, "sjdjs");
      let url = "/admin/signin/show";
      let data = {
        id: this.$route.query.id,
      };
      this.axios.post(url, data).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.dialogForm.title = res.record.title;
          this.dialogForm.image_path = res.record.image_path;
          this.dialogForm.start_date = res.record.start_date;
          this.dialogForm.address = res.record.address;
          this.dialogForm.created_at = res.record.created_at;
          this.section = res.section;
        }
      });
    },
    defulttime(value) {
      this.timelist = value;
      console.log(this.timelist[0], "sddsdsd");
    },
    // 关闭弹窗
    cancelBtn() {
      this.dialogFormVisible = false;
    },
    add() {
      this.dialogForm.id = null;
      this.value2 = "";
      this.dialogFormVisible = true;
    },
    confirmBtn() {
      console.log(new Date(this.timelist[0]));
      if (this.dialogForm.id == null) {
        let url = "/admin/signin/addTimeSection";
        let data = {
          event_signin_id: this.$route.query.id,
          start_time: this.timelist[0],
          end_time: this.timelist[1],
        };
        this.axios.post(url, data).then((res) => {
          if (res.code == 0) {
            this.singform();
            console.log("新增成功");
            this.dialogFormVisible = false;
          }
        });
      } else if (this.dialogForm.id != null) {
        let url = "/admin/signin/updateTimeSection";
        let data = {
          section_id: this.$route.query.id,
          start_time: this.timelist[0],
          end_time: this.timelist[1],
        };
        this.axios.post(url, data).then((res) => {
          if (res.code == 0) {
            this.singform();
            console.log("修改成功");
            this.dialogFormVisible = false;
          }
        });
      }
    },
    //修改时间
    modify(item) {
      console.log(item, "sss");
      this.dialogTitle = "修个签到时间";
      this.dialogFormVisible = true;
      this.dialogForm.id = item.id;
      this.dialogForm.start_date = item.start_time;
      this.dialogForm.address = item.end_time;
    },
    //删除时间
    deleter(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "/admin/signin/removeTimeSection";
        let data = {
          section_id: id,
        };

        this.axios
          .post(url, data)
          .then((res) => {
            if (res.code == 0) {
              this.singform();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
    // 返回上一页
    backBtn() {
      this.$router.replace({
        name: "signlist",
      });
    },
  },
};
</script>

<style scoped>
.avatar {
  width: 200px;
  height: 200px;
}
/* .exam_from_btn_box {
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  left: 0;
  padding: 10px 0;
  border-top: 1px solid #dddddd;
  background-color: #fff;
} */
.page_box_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.block {
  display: flex;
  line-height: 40px;
}

.el-input__inner {
  width: 220px;
}
</style>